<template  >
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
      <el-header class="head">
        <div class="divHead"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div><div class="topFont">租户信息管理</div></div>
            </div></el-col
          >
          <div class="divBtn">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"

              >新增</el-button
            >

            <!--新增用户-->
            <el-dialog
              title="租户新增"
              :visible.sync="dialogAddgsVisible"
              @close="closeDialogAddgsVisible"
            >
              <div class="dialogAll">
                <div class="left">
                  <div class="leftFont">基本信息：</div>

                  <div class="leftForm">
                    <div class="addEnterprise">
                      <el-form
                        ref="addEnterprise"
                        label-width="80px"
                        size="mini"
                        :model="addEnterprise"
                      >
                        <el-form-item
                          label="合同编号"
                          :required="true"
                          style="width: 250px"
                          prop="addEnterprise.contractNum"
                        >
                          <el-input
                            v-model="addEnterprise.contractNum"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="企业名称"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseId"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseName"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="信用代码"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseCreditcode"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseCreditcode"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="企业规模"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseScale"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseScale"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="注册资金"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseBy2"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseBy2"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="企业估值"
                          :required="true"
                          style="width: 250px"
                          prop="enterprisePrice"
                        >
                          <el-input
                            v-model="addEnterprise.enterprisePrice"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="是否高新"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseIshigh"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseIshigh"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="是否上市"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseIsshi"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseIsshi"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="营业执照"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseLicense"
                        >
                          <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img
                              v-if="imageUrl"
                              :src="imageUrl"
                              class="avatar"
                            />
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"
                            ></i>
                          </el-upload>
                        </el-form-item>
                        <el-form-item
                          label="LOGO"
                          :required="true"
                          style="width: 250px"
                          prop="enterpriseLogo"
                        >
                          <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img
                              v-if="imageUrl"
                              :src="imageUrl"
                              class="avatar"
                            />
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"
                            ></i>
                          </el-upload>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>

                <div class="right02">
                  <div class="rightFont">合同信息</div>
                  <div class="rightForm">
                    <div class="carForm">
                      <el-form
                        ref="visitorForm"
                        label-width="80px"
                        size="mini"
                        :model="addEnterprise"
                      >
                        <el-form-item
                          label="合同编号"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="contractNum"
                        >
                          <el-input
                            v-model="addEnterprise.contractNum"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="银行卡号"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="enterpriseCarnumber"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseCarnumber"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="合同凭证"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="contractCont"
                        >
                          <el-input
                            v-model="addEnterprise.contractCont"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          label="转账凭证"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="contractCollection"
                        >
                          <el-input
                            v-model="addEnterprise.contractCollection"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>

                <div class="right">
                  <div class="rightFont">负责人信息</div>
                  <div class="rightForm">
                    <div class="carForm">
                      <el-form
                        ref="visitorForm"
                        label-width="80px"
                        size="mini"
                        :model="addEnterprise"
                      >
                        <el-form-item
                          label="负责人"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="enterpriseBy3"
                        >
                          <el-input
                            v-model="addEnterprise.enterpriseBy3"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="联系方式"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="enterprisePhone"
                        >
                          <el-input
                            v-model="addEnterprise.enterprisePhone"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="性别"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="staffsSex"
                        >
                          <el-input
                            v-model="addEnterprise.staffsSex"
                            autocomplete="off"
                          >
                          </el-input>
                        </el-form-item>
                        <el-form-item
                          label="人脸照片"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="staffsPhoto"
                        >
                          <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img
                              v-if="imageUrl"
                              :src="imageUrl"
                              class="avatar"
                            />
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"
                            ></i>
                          </el-upload>
                        </el-form-item>

                        <el-form-item
                          label="用户头像"
                          :required="true"
                          style="width: 250px; float: left"
                          prop="staffsTouxiang"
                        >
                          <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                          >
                            <img
                              v-if="imageUrl"
                              :src="imageUrl"
                              class="avatar"
                            />
                            <i
                              v-else
                              class="el-icon-plus avatar-uploader-icon"
                            ></i>
                          </el-upload>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>

              <div slot="footer" style="text-align: center">
                <el-button @click="dialogAddgsVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEnter()">确 定</el-button>
              </div>
            </el-dialog>
            <el-button size="mini" type="warning" icon="el-icon-delete"
              >批量删除</el-button
            >
          </div>
        </el-row>
      </el-header>
      <el-main class="bottomMain">
        <div class="divMain">
          <template>
            <!-- 模糊查询 -->
            <div class="mainTop">
              <div class="divInputAll">
                <!-- 输入框 -->
                <div class="divInput1">
                  <div class="inputFont">租户名称：</div>
                  <div style="float: left">
                    <el-input
                      size="mini"
                      placeholder="请输入租户名称"
                      v-model="queryContracts.enterpriseName"
                    >
                    </el-input>
                  </div>
                </div>
                <div class="divInput1">
                  <div class="inputFont">所属楼宇编号：</div>
                  <div style="float: left">
                    <el-input
                      size="mini"
                      placeholder="请输入楼宇编号"
                      v-model="queryContracts.buildingNum"
                    >
                    </el-input>
                  </div>
                </div>

                <div class="divInput1">
                  <div class="inputFont">房间名称：</div>
                  <div style="float: left">
                    <el-input
                      size="mini"
                      placeholder="请输入房间名称"
                      v-model="queryContracts.roomName"
                    >
                    </el-input>
                  </div>
                </div>



                <div class="likeBtn">
                  <el-button size="mini" type="success" icon="el-icon-search"
                  @click="LikeLoadContracts"
                    >查询</el-button
                  >
                  <el-button size="mini" plain @click="loadContractsNull">重置</el-button>
                </div>
              </div>
            </div>
          </template>
          <!-- 查所有 -->
          <div class="divSelAll">
            <template>
              <el-table
                :data="enterpriseList"
                border
                style="width: 100%; font-size: x-small; margin: auto"
                :row-style="{ height: '22px' }"
                :cell-style="{ padding: '1px' }"
              >
                <el-table-column fixed type="selection" prop="ids" width="60">
                </el-table-column>
<el-table-column
                  fixed
                  prop="staffsName"
                  label="人员姓名"
                  width="110"
                >
                </el-table-column>
<el-table-column
                  fixed
                  prop="staffsTel"
                  label="联系方式"
                  width="110"
                >
                </el-table-column>
                 <el-table-column prop="staffstypeName" label="人员类型" width="80"></el-table-column>
                <el-table-column
                  fixed
                  prop="enterpriseName"
                  label="租户名称"
                  width="190"
                >
                </el-table-column>
                <el-table-column
                  prop="buildingNum"
                  label="所属楼宇编号"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="roomName" label="房间名称" width="80">
                </el-table-column>

                <el-table-column
                  prop="enterpriseDate"
                  label="注册时间"
                  width="180"
                >
                </el-table-column>
                <el-table-column label="操作" width="230">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >详情</el-button
                    >
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页,current-page当前第几页,page-size一页显示几条数据 -->
          <!-- 分页,current-page当前第几页,page-size一页显示几条数据 -->
          <div class="divPage">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryContracts.currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="queryContracts.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      dialogAddgsVisible: false,
      addEnterprise: {},
      enterpriseList: [],
      contractsList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",

      imageUrl: "",
      value: "",
      queryContracts: {
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
        enterpriseName: "", //住户名称
        buildingName: "", //楼宇名称
        roomName: "", //房间名称
      },
      page: {
        total: 0, //总条数
      },
    };
  },
  mounted() {
    this.loadContracts();
    this.loadContractsinfo();
  },

  methods: {
    LikeLoadContracts(){
      this.queryContracts.currentPage=1,
      this.loadContracts();
    },
     loadContractsNull() {
      (this.queryContracts.enterpriseName = ""), //住户名称
        (this.queryContracts.buildingNum = ""), //楼宇编号
        (this.queryContracts.roomName = ""), //房间名称
        this.loadContracts();
    },
    //每一页显示的条数变化时
    handleSizeChange(val) {
      this.queryContracts.pageSize = val;
      this.loadContracts();
    },
    //当前页数变化时
    handleCurrentChange(val) {
      this.queryContracts.currentPage = val;
      this.loadContracts();
    },
    /**头像上传 */
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    /**
     *点击新增按钮，弹出新增模态框
     */
    carsAdd() {
      this.dialogAddgsVisible = true;
    },
    contractsInformation() {
      this.dialogAddgsVisible = true;
    },
    /**
     *关闭或取消模态框，清空asdsadad值
     */
    // closeDialogAddgsVisible(){
    //   this.$refs.from.resetFields();//element封装的方法,清空模态框的值
    //   this.from={//初始化from中的值
    //   }
    // },

    /**
     * 获取全部企业信息
     */
    loadContracts() {
      this.$axios
        .post("enterprise/queryAllStaffsAndEnterprise", this.queryContracts)
        .then((res) => {
          this.enterpriseList = res.data.data.contractList;
          this.page.total = res.data.data.total;
        });
    },

    addEnter() {
      alert(1);
      this.$axios.post("enterprise/inserts", this.addEnterprise).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.addDialog = false; //关闭dialog
          this.$refs.addEnterprise.resetFields(); //重置form
          loadContracts();
        }
        // this.page.total = res.data.data.total;
      });
    },
  },
};
</script>
  <style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.all {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}
.allContainer {
  width: 98%;
  margin: auto;
}
.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}
.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}
.topFont {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}
.divBtn {
  float: right;
  margin-right: 10px;
}
.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}
.divMain {
  width: 100%;
  height: 100%;
}
.mainTop {
  width: 100%;
  height: 11%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}
.divInputAll {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

/** 搜索栏div */
.divInput1 {
  border: 0px solid red;
  width: 23%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}
.divSelect {
  border: 0px solid red;
  width: 24.9%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}
.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}
.inputFont {
  float: left;
  font-size: 11px;
}
.optionFont {
  float: right;
  color: #8492a6;
  font-size: xx-small;
}
.divSelAll {
  width: 100%;
  height: 72%;
  margin-top: 10px;
  line-height: 23px;
}
.divPage {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 54%;
  left: 57.5%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 1135px;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.dialogAll {
  border: 0px solid red;
  width: 101%;
  height: 120%;
  margin: auto;
  margin-top: -30px;
}
.left {
  border: 0px solid red;
  width: 33.3%;
  height: 100%;
  float: left;
}
.right {
  border: 0px solid red;
  width: 33.3%;
  height: 100%;
  float: right;
}
.right02 {
  border: 0px solid red;
  width: 33.3%;
  height: 100%;
  float: right;
}
.leftFont,
.rightFont {
  border: 0px solid red;
  width: 90%;
  height: 5%;
  line-height: 20px;
  text-align: left;
  font-weight: 500;
  font-family: "微软楷体";
  margin-left: 10px;
}
.leftForm,
.rightForm {
  border: 2px dashed #8492a6;
  border-radius: 10px;
  width: 90%;
  height: 94%;
}
.visitorForm,
.carForm {
  border: 0px solid red;
  width: 90%;
  height: 95%;
  margin: auto;
  margin-top: 30px;
  margin-left: 15px;
}
</style>
